<template>
    <div class="user">
        <van-nav-bar title="修改手机号码" left-text="" right-text="" left-arrow @click-left="onClickLeft"
            style="background-color: #F5F5F5;">
            <template #left>
                <van-icon name="arrow-left" size="19" color="#000" />
            </template>
            <!-- <template #right>
                <van-icon name="ellipsis" size="22" color="#000" />
            </template> -->
        </van-nav-bar>

        <div class="user-order">
            <van-form class="form" @submit="onSubmit">
                <div style="display: flex;">

                    <div
                        style="font-family: PingFang SC, PingFang SC;font-weight: bold;font-size: 15px;color: #151515;margin-left: 18px;margin-top: 25px;">
                        新手机号码
                    </div>
                </div>
                <van-field v-model="form.mobile" type="text" clearable placeholder="请输入新手机号码"
                    style="width: 325px;height:44px;background-color: #EFEFEF;border-radius: 77px;margin-top: 10px;margin-left: 25px;" />


                <div style="display: flex;margin-top: 23px;">

                    <div
                        style="font-family: PingFang SC, PingFang SC;font-weight: bold;font-size: 15px;color: #151515;margin-left: 18px;margin-top: 25px;">
                        验证码
                    </div>
                </div>
                <van-field v-model="form.captcha" type="text" clearable placeholder="请输入验证码"
                    style="width: 325px;height:44px;background-color: #EFEFEF;border-radius: 77px;margin-top: 10px;margin-left: 25px;">

                    <template #button>
                        <div v-if="isclick == 1"
                            style="font-family: MiSans, MiSans;font-weight: 400;font-size: 15px;color: #2E512E;"
                            @click="getCaptcha">
                            {{ message }}</div>
                        <div v-else-if="isclick == 2"
                            style="font-family: MiSans, MiSans;font-weight: 400;font-size: 15px;color: #2E512E;">
                            倒计{{ seconds }}秒</div>

                    </template>
                </van-field>

                <div style="margin-top:61px;margin-left: 26px;">
                    <van-button round block type="primary" native-type="submit"
                        style="background-color: #389138;width: 310px;height: 44px;">保存</van-button>
                </div>
            </van-form>
        </div>
    </div>
</template>

<script>
import { send, getChangemobile } from '@/api/user'

export default {
    name: 'User',
    components: {

    },
    data() {
        return {
            form: {

                mobile: "",
                captcha: "",
                event: "changemobile",
            },
            isclick: 1,
            message: "获取验证码",
            seconds: 60
        };
    },
    methods: {
        onClickLeft() {
            this.$router.back()
        },
        //获取验证码
        getCaptcha() {
            //
            this.isclick = 2
            send(this.form).then((res) => {
                if (res.code == 1) {
                    this.daojshi()
                }

            })
        },
        daojshi() {
            let that = this
            const interval = setInterval(function () {
                if (that.seconds === 0) {
                    clearInterval(interval);
                    that.isclick = 1
                    that.message = "重新获取验证码"
                } else {
                    that.seconds--;
                }
            }, 1000);
        },
        // 提交
        onSubmit() {
            if (this.form.mobile == "") {
                this.$toast.fail("请输入手机号")
                return
            }
            if (this.form.captcha == "") {
                this.$toast.fail("请输入验证码")
                return
            }

            getChangemobile(this.form).then((res) => {
                if (res.code == 1) {
                    this.$router.back()
                    this.$toast(res.msg)
                }

            })
        }
    },

    computed: {

    }
}
</script>

<style>
.user-order {
    width: 702px;
    height: 750px;
    margin: 0 auto;
    box-shadow: var(--user-order-shadow);
    border-radius: 24px;
    margin-top: 42px;
    background-color: #fff;
}
</style>